<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="container text-center">
    <table class="table table-hover table-striped">
        <tr>
            <td>文章ID</td>
            <td>用户ID</td>
            <td>操作</td>
        </tr>
        <tr th:each="read:${readList}"  th:id="|tr${read.readId}|">
            <td th:text="${read.readId}"></td>
            <td th:text="${read.userNumber}"></td>
            <td>
                <a th:href="|javascript:searchRead('${read.readId}')|">编辑</a>
                <a th:href="|javascript:deleteRead('${read.readId}');|">删除</a>
            </td>
        </tr>
    </table>
</div>
<!--        模态框       -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    更改文章信息
                </h4>
            </div>
            <div class="modal-body  form-group">
                <label for="readId">readId</label><input readonly class="form-control" type="text" id="readId" /> <br>
                <label for="readText">readText</label><textarea class="form-control" id="readText" cols="60" rows="5" style="min-width: 90%"></textarea> <br>
                <label for="userNumber">userNumber</label><input class="form-control" type="text" id="userNumber" /> <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <a type="button" class="btn btn-primary" th:href="|javascript:modifyRead()|">
                    提交更改
                </a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>

    function modifyRead(){
        var readId = $("#readId").val();
        var readText = $("#readText").val();
        var userNumber = $("#userNumber").val();
        $.ajax({
            url: '/Admin/modifyRead',
            type: 'POST',
            data: {readId: readId,readText:readText,userNumber:userNumber},
            success: function(){
                alert("修改成功");
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
    function searchRead(readId){
        $.ajax({
            url: '/Admin/searchRead',
            type: 'POST',
            data: {readId: readId},
            success: function(data){
                console.log(data);
                $("#readId").val(data.readId);
                $("#readText").val(data.readText);
                $("#userNumber").val(data.userNumber);
                $("#myModal").modal();
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
    function deleteRead(readId) {
        $.ajax({
            url: '/Admin/deleteRead',
            type: 'POST',
            data: {readId: readId},
            success: function () {
                $("#tr" + readId).remove();
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
</script>
</body>
</html>